import React, { useRef, useState } from "react";
import {
  View,
  Text,
  Modal,
  StyleSheet,
  TouchableOpacity,
  TouchableWithoutFeedback,
  Platform,
  StatusBar,
} from "react-native";

import { AntDesign } from "@expo/vector-icons";
import FilterSection from "./FilterSection";

const FilterModal = (props) => {
  const shapes = ["长方形", "圆形"];
  let positionMark = useRef();
  let arr = [];
  for (let i = 0; i < props.tagList.length; i++) {
    arr.push(-1);
  }

  let tagList = props.tagList;

  const [isVisible, setIsVisible] = useState(false); //控制modal是否可见
  const [topOffset, setTopOffset] = useState(0); //控制modal偏移量 距离上方多少
  const [Filter, setFilter] = useState(arr); //记录选中项的值
  const saveFilterHandler = (Filter) => {
    props.onSave(Filter);
  };

  const selectedItem = (index, Filterdata) => {
    console.log("index", index);
    let arr = Filter;
    arr[index] = Filterdata;
    setFilter([...arr]);
    // console.log("调用了");
    // console.log("nnnn", arr);
    // props.onSave(arr);
  };

  const list = (i) => {
    if (
      Filter[i] === -1 ||
      Filter === [] ||
      Filter === [] ||
      Filter[i] === undefined
    ) {
      return [];
    } else {
      return props.tagList[Filter[i]].types;
    }
  };

  if (props.type === 1) {
    // console.log("Filter里面的result----", props.tagList);
    let materialList = [
      {
        title: "类别",
        itemList: props.tagList.map((item) => {
          return item.category;
        }),
      },
      {
        title: "型号",
        itemList: list(0),
      },
    ];
    tagList = materialList;
  }

  if (props.type === 2) {
    let goodslist = [
      {
        title: "基板类别",
        itemList: props.tagList.map((item) => {
          return item.category;
        }),
      },
      {
        title: "基板型号",
        itemList: list(0),
      },
      {
        title: "覆版类别",
        itemList: props.tagList.map((item) => {
          return item.category;
        }),
      },
      {
        title: "覆版型号",
        itemList: list(2),
      },
      {
        title: "商品型号",
        itemList: shapes,
      },
    ];
    tagList = goodslist;
  }
  const showModal = () => {
    positionMark.current.measure((x, y, width, height, pageX, pageY) => {
      //Android的Y轴坐标是从状态栏以下开始计算的，而屏幕高度是包含了状态栏在内的,因此需要减去相应的高度
      // iOS是从屏幕顶端开始计算的
      const AndroidStatusBar =
        Platform.OS === "android" ? StatusBar.currentHeight : 0;
      const topOffset = pageY + height - AndroidStatusBar; // 计算"筛选"距离页面顶部的偏移量
      setTopOffset(topOffset);
    });
  };
  return (
    <View>
      <TouchableOpacity
        style={styles.button}
        onPress={() => {
          setIsVisible(true);
          showModal();
        }}
        ref={positionMark}
      >
        <Text style={styles.buttonText}>筛选</Text>
        <AntDesign name="filter" size={20} color="#666666" />
      </TouchableOpacity>

      <Modal animationType="fade" transparent={true} visible={isVisible}>
        <TouchableWithoutFeedback
          onPress={() => {
            setIsVisible(false);
            saveFilterHandler(Filter);
          }}
        >
          <View style={(styles.try, { height: topOffset + 5 })}></View>
        </TouchableWithoutFeedback>
        <View style={[styles.positionView]}>
          {tagList.map((tag, index) => {
            return (
              <FilterSection
                title={tag.title}
                tagList={tag.itemList}
                key={index}
                index={index}
                selectedItem={selectedItem}
                selectedState={Filter[index]}
              />
            );
          })}
        </View>
        <TouchableWithoutFeedback
          onPress={() => {
            setIsVisible(false);
            saveFilterHandler(Filter);
          }}
        >
          <View style={styles.trytry}></View>
        </TouchableWithoutFeedback>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  try: {
    width: "100%",
    height: 90,
  },
  trytry: {
    backgroundColor: "rgba(255, 255, 255, 0.1)",
    width: "100%",
    height: 700,
    // backgroundColor: "yellow",
  },

  positionView: {
    // marginLeft: 20,
    // marginRight: 20,
    paddingLeft: 10,
    paddingRight: 10,
    backgroundColor: "#F9F5F5",
    borderBottomLeftRadius: 5,
    borderBottomRightRadius: 5,
    paddingBottom: 10,
    // backgroundColor: "yellow",

    // position: "absolute",
    // top: 0,
  },
  modalView: {
    backgroundColor: "yellow",
  },
  optionView: {
    flexDirection: "row",
    justifyContent: "center",
    marginLeft: 50,
    marginRight: 50,
    marginBottom: 20,
    marginTop: 10,
  },
  button: {
    flexDirection: "row",
    // backgroundColor: "green",
  },
  buttonText: {
    fontSize: 15,
    alignItems: "center",
  },
});

export default FilterModal;
